<template>
  <div>
    <!-- 头部 -->
    <header>
      <div>
        <span @click="Return" class="jiantou"></span>
        <p>我的</p>
      </div>
    </header>
    <main v-if="dl != '成功'">
      <div class="login" @click="enroll">
        <svg
          t="1631524291283"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8832"
          width="200"
          height="200"
        >
          <path
            d="M512 0C229.236338 0 0 229.236338 0 512s229.236338 512 512 512 512-229.224912 512-512S794.775088 0 512 0z m-6.443844 190.801776c94.681097 0 171.710173 75.886551 171.710173 169.185192s-77.029076 169.208042-171.710173 169.208042-171.698748-75.909401-171.698749-169.185191S410.886484 190.801776 505.556156 190.801776zM793.141276 771.638944c0 61.536429-100.473702 61.536429-216.817084 61.536429H447.664383c-121.107714 0-216.794234 0-216.794234-61.536429v-12.670609c0-117.680137 97.240354-213.48091 216.794234-213.480909h128.659809c119.553879 0 216.817084 95.777922 216.817084 213.480909z"
            fill="#e5e5e5"
            p-id="8833"
          ></path>
          <path
            d="M576.324192 545.487426H447.664383c-119.553879 0-216.794234 95.755071-216.794234 213.480909v12.670609c0 61.536429 95.68652 61.536429 216.794234 61.536429h128.659809c116.343383 0 216.817084 0 216.817084-61.536429v-12.670609c0-117.702988-97.263205-213.48091-216.817084-213.480909zM505.556156 529.19501c94.681097 0 171.710173-75.875126 171.710173-169.185191S600.237253 190.801776 505.556156 190.801776s-171.698748 75.932252-171.698749 169.208043 77.029076 169.185192 171.698749 169.185191z"
            fill="#ffffff"
            p-id="8834"
          ></path>
        </svg>
        <div class="login-small">
          <div class="login-left">
            <p class="zhuce">登录/注册</p>
            <p>暂无绑定手机号</p>
          </div>
          <div class="login-right">
            <span class="jianttou"></span>
          </div>
        </div>
      </div>
      <!-- 数据部分 -->
      <div class="data">
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="ff90">0.00</span>元</p>
          我的余额
        </div>
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="ff5f3e">0</span>个</p>
          我的优惠
        </div>
        <!-- 数据小盒子 -->
        <div class="data-small">
          <p><span class="green">0</span>分</p>
          我的积分
        </div>
      </div>
    </main>
    <main v-else>
      <!-- v-for="(value, index) in arr" :key="index" -->
      <div >
        <div class="login" @click="revise">
          <img class="xin" :src="src" alt="" />
          <div class="login-small">
            <div class="login-left">
              <p class="zhuce">{{ arr.username }}</p>
              <p>暂无绑定手机号</p>
            </div>
            <div class="login-right">
              <span class="jianttou"></span>
            </div>
          </div>
        </div>
        <!-- 数据部分 -->
        <div class="data">
          <!-- 数据小盒子 -->
          <div class="data-small">
            <p v-if="arr.balance != ''">
              <span class="ff90">{{ arr.balance.toFixed(2) }}</span
              >元
            </p>
            <p v-else>
              <span class="ff90">0</span>
              元
            </p>
            我的余额
          </div>
          <!-- 数据小盒子 -->
          <div class="data-small">
            <p v-if="arr.gift_amount != ''">
              <span class="ff5f3e">{{ arr.gift_amount }}</span
              >个
            </p>
            <p v-else>
              <span class="ff5f3e">0</span>
              个
            </p>
            我的优惠
          </div>
          <!-- 数据小盒子 -->
          <div class="data-small">
            <p v-if="arr.point != ''">
              <span class="green">{{ arr.point }}</span
              >分
            </p>
            <p v-else>
              <span class="green">0</span>
              分
            </p>
            我的积分
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="separatrix"></div>
      <p class="hang">
        <span>我的订单</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>积分商城</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>饿了么会员卡</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <div class="separatrix"></div>
      <p class="hang">
        <span>服务中心</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
      <p class="hang">
        <span>下载饿了么</span>
        <svg
          t="1631526667316"
          class="jianttouu"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2159"
          width="200"
          height="200"
        >
          <path
            d="M346.52382345477406 104.43830532674417c-12.257495055447652-12.257495055447652-30.6437359627898-12.257495055447652-42.90123101823747 0s-12.257495055447652 30.6437359627898 0 42.90123101823747L668.2830560915551 512 303.6225924365366 876.6604636550185c-12.257495055447652 12.257495055447652-12.257495055447652 30.6437359627898 0 42.90123101823747 6.128747527723826 6.128747527723826 15.3218679813949 9.193120453671073 21.450615509118734 9.193120453671073s15.3218679813949-3.064372925947246 21.450615509118734-9.193120453671073l386.1110791641372-386.1110791641372c12.257495055447652-12.257495055447652 12.257495055447652-30.6437359627898 0-42.90123101823747L346.52382345477406 104.43830532674417z"
            fill="#cdcdcd"
            p-id="2160"
          ></path>
        </svg>
      </p>
    </footer>

    <!-- 尾部组件 -->
    <divfooter> </divfooter>
  </div>
</template>
<style scoped>
.xin {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}
.hang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.hang span {
  font-size: 0.32rem;
}
.jianttouu {
  width: 0.3rem;
  height: 0.3rem;
}
.separatrix {
  height: 0.3rem;
  width: 100%;
  background-color: #f5f5f5;
}
.green {
  color: #6ac20b;
}
.ff5f3e {
  color: #ff5f3e;
}
.ff90 {
  color: #f90;
}
.data-small span {
  font-size: 0.5rem;
  font-weight: 700;
}
.data-small {
  width: 33%;
  line-height: 0.5rem;
  height: 100%;
  padding: 0.3rem;
  border-right: 1px solid #f1f1f1;
  color: #666;
  box-sizing: border-box;
  text-align: center;
}
.data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2rem;
}
.jianttou {
  width: 0.12rem;
  height: 0.12rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.02rem 0.02rem 0px 0px;
  transform: rotateZ(45deg);
}
.zhuce {
  font-weight: 700;
  font-size: 0.4rem;
}
.login-small {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-right {
  display: flex;
}
.login-left {
  color: #fff;
}
.icon {
  width: 1.2rem;
  height: 1.2rem;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.3rem;
}
header {
  position: fixed;
  z-index: 1990;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: #3190e8;
}
header div {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
  font-weight: 700;
}
.jiantou {
  width: 0.24rem;
  height: 0.24rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(225deg);
}
main {
  margin-top: 1rem;
}
.login {
  width: 100%;
  height: 2.2rem;
  display: flex;
  padding: 0.2rem 0.4rem;
  box-sizing: border-box;
  background: #3190e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<script>
import divfooter from "../elm-footer/elm-footer.vue";
export default {
  components: {
    divfooter,
  },
  data() {
    return {
      dl: "",
      arr: [],
      src: "http://elm.cangdu.org/img/default.jpg",
    };
  },
  mounted() {
    if (localStorage.src) {
      this.src = localStorage.src;
    }
    if (localStorage.dl) {
      this.dl = localStorage.dl;
    }
    if (localStorage.submit) {
      this.arr = JSON.parse(localStorage.submit);
      console.log(this.arr);
    } else {
      if (this.$route.query.arr1) {
        this.arr.push(this.$route.query.arr1);
        console.log(this.arr);
        localStorage.submit = JSON.stringify(this.arr);
        // console.log(this.arr);
      }
    }
    // console.log(this.$route.query.arr1);
    // console.log(this.arr);
  },
  methods: {
    /* 返回 */
    Return() {
      this.$router.go(-1);
    },
    /* 页面跳转 */
    enroll() {
      this.$router.push({ path: "/elm-enroll" });
    },
    /* 页面跳转 */
    enroll1() {
      this.$router.push({ path: "/elmshop" });
    },
    /* 修改个人数据 */
    revise() {
      this.$router.push({ path: "/elm-revise", query: { arr: this.arr } });
    },
  },
};
</script>
